<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue"
import { useI18n } from "vue-i18n";
import { UserModule } from "@/store/modules/user";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import { getUserInfo, transfer, getLeaderInfo } from "@/api"

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const pageLoading = ref(false)
        const loading = ref(false)
        const TeamLeader = ref({})
        const loadData = async () => {
            pageLoading.value = true
            const res = await getLeaderInfo()
            TeamLeader.value = res.data.data.TeamLeader || {}
            pageLoading.value = false
        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            loadData,
            pageLoading,
            loading,
            TeamLeader,
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="TeamLeader">
            <div class="TotalReward"><span>总奖励：</span>{{ TeamLeader.TotalReward || 0 }}</div>
            <div class="total">
                <div class="cell">
                    <div class="label">{{ $t('layout.SemiFinalResults') }}</div>
                    <div class="value">{{ TeamLeader.Invest15Amount || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.SemiFinalRewards') }}</div>
                    <div class="value">{{ TeamLeader.Reward15 || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.FinalPerformance') }}</div>
                    <div class="value">{{ TeamLeader.Invest30Amount || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.FinalReward') }}</div>
                    <div class="value">{{ TeamLeader.Reward30 || 0 }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.page {
    padding: 0 25px;

    .TeamLeader {
        .TotalReward {
            padding: 20px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #1F2120;

            span {
                font-weight: normal;
            }
        }

        .total {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .cell {
                margin-bottom: 15px;
                width: 152px;
                height: 82px;
                text-align: center;
                background: rgba(11, 166, 98, 0.05);
                border-radius: 6px;
                border: 1px solid #FFFFFF;

                .label {
                    color: #1F2120;
                    padding-top: 19px;
                }

                .value {
                    margin-top: 10px;
                    font-size: 20px;
                    font-weight: bold;
                    color: #1F2120;
                }
            }
        }
    }
}
</style>
